<template>
  <div id="ForgetPwd1">
    <van-form @submit="onSubmit" id="forgetPwdForm">

      <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请填写邮箱"
          :rules="[{ required: true,pattern: emailValidate,message:'邮箱格式有误'}]"
          :formatter="formatter"
      >
        <template #button>
          <van-button :disabled="disable" native-type="button" size="small" @click="getCode" :type="btnType">
            <span v-show="!disable">获取验证码</span>
            <span v-show="disable">{{time}}</span>
          </van-button>
        </template>

      </van-field>

      <van-field
          v-model="code"
          name="code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
          :formatter="formatter"
      />
      <div>
        <van-button plain :loading="isLoading" id="submitBtn" type="info" native-type="submit">
          下一步
        </van-button>
      </div>

    </van-form>
  </div>
</template>

<script>
import {Toast} from 'vant';

export default {
  name: 'ForgetPwd1',
  data: function () {
    return {
      email: '',
      code: '',
      disable: false,
      isLoading: false,
      time: 60,
      emailCode: '',
      btnType: 'primary',
      btnMsg: '发送验证码',
      emailValidate: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    }
  },
  methods: {
    onSubmit() {
      console.log(this.code, this.emailCode);
      if (this.code !== this.emailCode) {
        Toast.fail('验证码错误');
        return;
      }
      this.isLoading = true;
      setTimeout(() => {
        this.$router.push('/forgetpwd/2');
        this.isLoading = false;
      }, 1000);
    },
    getCode() {
      this.btnType = 'default';
      this.disable = true;
      let interval = window.setInterval(() => {
        if ((this.time--) <= 0) {
          this.time = 60;
          window.clearInterval(interval);
          this.btnType = 'primary';
          this.disable = false;
          this.msg = '重新获取验证码';
        } else {
          this.btnMsg = this.time + '';
        }
      }, 1000);
      this.checkEmail().catch(err => {
        this.btnType = 'primary';
        this.disable = false;
        this.msg = '重新获取验证码';
        Toast.fail(err.msg);
      })
    },
    formatter(v) {
      return v.trim()
    },
    checkEmail() {
      let email = this.email;
      return new Promise(((resolve, reject) => {
        axios.post('/yibancircle/register', {
          email,
          forget: 'y'
        }, {
          headers: {'Content-type': 'application/json;charset=utf-8'}
        }).then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.emailCode = res.result.code;
            this.$store.commit('setRegisterInfo', {value: res.result, key: 'code'});
            resolve();
          } else {
            reject(res);
          }
        })
      }))
    }
  }
}
</script>

<style scoped>
#submitBtn {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 100;
}

#forgetPwdForm {
  height: 100%;
}
</style>
